<template>
  <div class="pimglun">
    <div class="ys">
      <div class="iconfont icon-zuojiantou"></div>
      <div class="pl">评论(1121)</div>
      <van-icon class="ys1" name="share-o" />
    </div>
    <div class="jz">
      <img src="../../../public/img/xd.png" alt="" />
      <span class=""
        >是心动啊- <span class="yy">一口甜/吃可爱多吗？</span>
      </span>
    </div>
    <div class="bg1"></div>
    <div class="bg2">
      <div class="ys2">评论区</div>
      <div class="ys3">
        <div>推荐</div>
        <div>最热</div>
        <div>最新</div>
      </div>
    </div>
    <div>
      <div id="app" v-for="item in list" :key="item.index">
        <div class="ys4">
          <div class="ys6">
            <van-image round width="3rem" height="3rem" :src="item.img" />
            <div class="zt12 ml10">
              <div>{{ item.nickname }}</div>
              <div>{{ item.timestr }}</div>
            </div>
          </div>
          <div class="ys5">
            <div class="hh">{{ item.zan }}</div>
            <div><img src="../../../public/img/zan.png" alt="" /></div>
          </div>
        </div>
        <div class="ys7">{{ item.pinglun }}</div>
        <div class="bg3">{{item.type}}条回复<van-icon name="arrow" /></div>
      </div>
    </div>
    <van-cell-group class="ys8">
      <van-field
        v-model="value"
        label=""
        placeholder="这一次也许就是你上热评了"
      />
      <van-icon class="ys9" name="smile-o" size="30px" />
      <van-button class="ys10" color="gray" type="primary">发送</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import { pl } from "../../api/pinglun";
export default {
  data() {
    return {
      value: "",
      list: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async getsonglist(id) {
      const result = await pl(id);
      console.log(result.comments);
      result.comments.forEach((item, index) => {
        // console.log(index);
        // console.log(item.user.avatarUrl);
        this.list.push({
          pinglun: item.content,
          time: item.time,
          timestr: item.timeStr,
          commentid: item.commentId,
          nickname: item.user.nickname,
          index: index,
          zan: item.likedCount,
          img: item.user.avatarUrl,
          type:item.user.vipType,
        });
      });
      // console.log(this.list.index);
      // console.log(result.comments[0].content);
      // this.list = result;
    },
  },

  created() {
    this.getsonglist(186016);
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.icon-zuojiantou {
  color: black;
}
.ys {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.pl {
  margin-left: -265px;
}
.yy {
  color: gray;
}
.jz {
  width: 100%;
  text-align: left;
  margin-top: 20px;
  margin-left: 40px;
}
.jz img {
  vertical-align: middle;
}
.bg1 {
  width: 100%;
  height: 10px;
  margin-top: 10px;
  background-color: #f6f6f6;
}
.bg2 {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ys2 {
  flex: 1;
  margin-left: 10px;
}
.ys3 div {
  float: left;
  margin: 0px 10px;
}
.ys4 {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.ys5 {
  display: flex;
  margin-right: 10px;
}
.ys6 {
  display: flex;
  margin-left: 10px;
}
.ml10 {
  margin-left: 10px;
}
.bg3 {
  color: #94b0c0;
  margin-left: 65px;
  margin-top: 10px;
  font-size: 12px;
}
.ys7 {
  text-align: left;
  margin-left: 65px;
  font-size: 12px;
}
.zt12 {
  font-size: 12px;
}
.ys8 {
  width: 100%;
  position: fixed;
  bottom: 50px;
}
.ys9 {
  position: absolute;
  right: 150px;
  top: 10px;
}
.ys10 {
  position: absolute;
  right: 60px;
  bottom: 0px;
}
.hh{
  font-size: 12px;
}
</style>
